<template>
	<div id="PerCenter">
		<el-container>
			<el-header style="height: 55px;">
				<span style="padding-left: 50px; float: left; color: bisque; font-size: 40px; margin-top: 10px;">
					百&nbsp;货&nbsp;商&nbsp;城</span>
				<ul>
					<li>
						<div class="userImg">
							<el-avatar style="margin-top: 10px;" icon="el-icon-s-custom"></el-avatar>
							<!-- 把用户名传递过来 -->
							<span v-if="username">欢迎{{username}}</span>
							<span v-else style="color: skyblue;">
								<router-link to="/addressLogin">去登录</router-link>
							</span>
						</div>
					</li>
					<li @click='changePage("Index")'>商城首页</li>
					<li @click='changePage("ShopCart")'>购物车</li>
					<li @click='changePage("Favorites")'>收藏夹</li>
					<li @click='changePage("OrderCenter")'>我的订单</li>
					<li style="color: red;" @click='changePage("PerCenter")'>个人中心</li>
					<li v-if="username" @click='changePage("exit")'>退出登录</li>
					<li style="color: greenyellow ; font-size: 22px;" @click='changePage("main")'>管理员入口</li>
				</ul>
			</el-header>
			<el-main>
				<div>
					<div>
						<img :src="ruleForm.file">
						<div id="active_hover" @click="hover_click">
							<img src="../assets/img/camera.png">
						</div>
					</div>
					<div class="baseInfo">
						<div>
							<h3>基本信息</h3>
						</div>
						<div>
							<ul>
								<li>
									<P>用户昵称:&nbsp;<span>{{ruleForm.nickname}}</span></P>
								</li>
								<li>
									<P>用户ID:&nbsp;<span>{{ruleForm.username}}</span></P>
								</li>
								<li>
									<P>余额:&nbsp;<span>{{ruleForm.money}}</span></P>
								</li>
								<li>
									<P>电话:&nbsp;<span>{{ruleForm.tel}}</span></P>
								</li>
								<li>
									<P>邮箱:&nbsp;<span>{{ruleForm.email}}</span></P>
								</li>
								<li>
									<P>性别:&nbsp;<span>{{ruleForm.sex}}</span></P>
								</li>
								<li>
									<P>籍贯:&nbsp;<span>{{ruleForm.address.toString()}}</span></P>
								</li>
								<li>
									<P>个人简介:&nbsp;<span>{{ruleForm.description}}</span></P>
								</li>
							</ul>
							<p>
								<el-button type="primary" class="redact" @click="EditInfo">编辑</el-button>
								<el-button type="primary" class="address" @click="AddressInfo">地址信息</el-button>
								<el-button type="primary" class="order" @click="OrderInfo">订单信息</el-button>
								<el-button type="primary" class="money" @click="MoneyInfo">余额充值</el-button>
							</p>
						</div>
					</div>
				</div>
			</el-main>
		</el-container>
		<el-dialog title="请上传图片" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-upload class="upload-demo" drag action="http://localhost:8080/api/mall/OSSFileUploadServlet"
				:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
			</el-upload>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="个人信息编辑区域" :visible.sync="editFlag" width="30%" :before-close="handleClose">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="用户昵称:" prop="nickname">
					<el-input v-model="ruleForm.nickname"></el-input>
				</el-form-item>
				<el-form-item label="电话:" prop="tel">
					<el-input v-model="ruleForm.tel"></el-input>
				</el-form-item>
				<el-form-item label="邮箱:" prop="email">
					<el-input v-model="ruleForm.email"></el-input>
				</el-form-item>
				<el-form-item label="性别:" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio label="男" value="男"></el-radio>
						<el-radio label="女" value="女"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="籍贯:" prop="address">
					<el-cascader v-model="ruleForm.address" :options="options" :props="{ expandTrigger: 'hover' }"
						@change="handleChange"></el-cascader>
				</el-form-item>
				<el-form-item label="个人简介" prop="description">
					<el-input type="textarea" v-model="ruleForm.description"></el-input>
				</el-form-item>
				<el-form-item class="last_footer">
					<el-button type="primary" @click="submitForm('ruleForm')" class="edit">提交</el-button>
					<el-button @click="resetForm('ruleForm')" class="edit">重置</el-button>
					<el-button type="primary" @click="editFlag=false" class="edit">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="地址信息" :visible.sync="addressDialogVisible" width="1024" center>
			<el-button type="primary" @click="addAddress"
				style="width: 60px;height: 30px;margin-left: 90%;margin-bottom: 10px;">新增地址</el-button>
			<el-table :data="addressList" stripe border style="width: 100%">
				<el-table-column prop="name" label="收货人" width="100px"></el-table-column>
				<el-table-column prop="tel" label="手机号" width="150px"></el-table-column>
				<el-table-column prop="address" label="收货地址"></el-table-column>
				<el-table-column label="默认地址" width="80px">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.is_default == 1" type="success" style="width: 60px;text-align: center;">
							是 </el-tag>
						<el-tag v-if="scope.row.is_default == 0" type="danger" style="width: 60px;text-align: center;">否
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250px">
					<template slot-scope="scope">
						<el-button type="primary" @click="editData(scope)" style="width: 50px;height: 30px;">修改
						</el-button>
						<el-button type="danger" style="width: 50px;height: 30px;" @click="delData(scope)">删除
						</el-button>
						<el-button type="primary" @click="setDefault(scope)" style="width: 70px;height: 30px;">设置默认
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord"
				style="margin-left: 180px;">
			</el-pagination>
		</el-dialog>

		<el-dialog title="订单信息" :visible.sync="orderDialogVisible" width="1024" center>
			<el-table :data="orderList" stripe border style="width: 100%">
				<el-table-column prop="order_code" label="订单号"></el-table-column>
				<el-table-column prop="payment_money" label="金额"></el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 1" type="success" style="text-align: center;">已完成 </el-tag>
						<el-tag v-if="scope.row.status == 2" type="danger" style="text-align: center;">待付款 </el-tag>
						<el-tag v-if="scope.row.status == 3" type="success" style="text-align: center;">待收货 </el-tag>
						<el-tag v-if="scope.row.status == 4" type="danger" style="text-align: center;">已取消 </el-tag>
						<el-tag v-if="scope.row.status == 5" type="danger" style="text-align: center;">已退货 </el-tag>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250px">
					<template slot-scope="scope">
						<el-button type="primary" @click="orderDetails(scope.row.order_code)"
							style="width: 70px;height: 30px;">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord"
				style="margin-left: 180px;">
			</el-pagination>
		</el-dialog>

		<el-dialog title="订单详情列表" :visible.sync="orderDetailsDialogVisible" width="1024" center>
			<el-table :data="orderDetailsList" stripe border style="width: 100%">
				<el-table-column property="order_details_id" label="订单详情id" width="100"></el-table-column>
				<el-table-column property="goods_name" label="商品名称" width="100"></el-table-column>
				<el-table-column property="item_num" label="商品购买数量" width="150"></el-table-column>
				<el-table-column property="item_title" label="商品标题" width="150"></el-table-column>
				<el-table-column property="item_price" label="商品单价"></el-table-column>
				<el-table-column property="total" label="商品总金额"></el-table-column>
				<el-table-column fixed="right" label="操作" width="250px">
					<template slot-scope="scope">
						<el-button type="primary" style="width: 70px;height: 30px;">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog title="添加地址信息" :visible.sync="addDialogVisible" width="500px" center>
			<el-form :model="addAddressInfo" label-width="80px">
				<el-form-item label="收货人">
					<el-input v-model="addAddressInfo.name"></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="addAddressInfo.tel"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="addAddressInfo.address"></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false" style="width: 55px;height: 35px;">取 消</el-button>
				<el-button type="primary" style="width: 55px;height: 35px;" @click="AddAddress">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="修改地址信息" :visible.sync="upDialogVisible" width="500px" center>
			<el-form :model="addressInfo" label-width="80px">
				<el-form-item label="收货人">
					<el-input v-model="addressInfo.name"></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="addressInfo.tel"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="addressInfo.address"></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="upDialogVisible = false" style="width: 55px;height: 35px;">取 消</el-button>
				<el-button type="primary" style="width: 55px;height: 35px;" @click="updateAddress">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="余额充值" :visible.sync="upMoneyDialogVisible" width="500px" center>
			<el-form label-width="80px">
				<el-form-item label="充值金额">
					<el-input v-model="money" placeholder="请输入充值金额"></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="upMoneyDialogVisible = false" style="width: 55px;height: 35px;">取 消</el-button>
				<el-button type="primary" style="width: 55px;height: 35px;" @click="updateMoney">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	export default {
		created() {
			//来到Favorites页面首先看看有误登录的用户信息
			let memberInfo = window.sessionStorage.getItem("memberInfo");
			if (memberInfo) {
				console.log(memberInfo);
				let memberInfoObj = JSON.parse(memberInfo);
				//console.log('memberInfoObj',memberInfoObj)
				this.username = memberInfoObj.username;
				this.memberId = memberInfoObj.member_id;
				this.ruleForm.member_id = this.memberId;
				console.log('this.username', this.username)
				this.getMemberInfoById();
			} else {
				//this.$message.warning("请先登录")
				this.$notify({
					title: '提示',
					message: "请先登录",
					duration: 2000
				});
				this.$router.push('/MemberLogin');

			}

		},
		data() {
			return {
				username: '',
				memberId: '',
				options: [],
				dialogVisible: false,
				editFlag: false,
				ruleForm: {
					// member_id: '2018324141', //用户ID
					// username: 'lwd1513', //用户账号
					// nickname: 'Amy', //用户昵称
					// tel: '423435353', //用户电话
					// email: '243253543@rwcda', //用户邮箱
					// address: ['广东', '湛江'], //用户地址
					// sex: '女', //用户性别
					// description: '咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩', //用户简介
					// file: "http://127.0.0.1:8088/mall/img/almsev.2fa15777.jpeg"

					member_id: '', //用户ID
					username: '', //用户账号
					nickname: '', //用户昵称
					tel: '', //用户电话
					email: '', //用户邮箱
					address: '', //用户地址
					sex: '', //用户性别
					description: '', //用户简介
					file: ''
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
				addressInfo: {
					address_id: '',
					name: '',
					tel: '',
					address: '',
				},
				upAddressList: {
					address_id: '',
					name: '',
					tel: '',
					address: '',
				},
				addAddressInfo: {
					address_id: '',
					name: '',
					tel: '',
					address: '',
					member_id: '',
				},
				money: '',
				currentPage: 1,
				addressList: [],
				addressDialogVisible: false,
				activeIndex: '1',
				upDialogVisible: false,
				orderDialogVisible: false,
				orderDetailsDialogVisible: false,
				upMoneyDialogVisible: false,
				addDialogVisible: false,
				orderDetailsList: [],
				orderList: [],
				rules: {
					nickname: [{
							required: true,
							message: '请输入昵称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					address: [{
						required: true,
						message: '请输入籍贯',
						trigger: 'blur'
					}],
					tel: [{
						required: true,
						message: '请输入电话',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}],
					description: [{
						required: true,
						message: '请填写个人简介',
						trigger: 'blur'
					}],
				},
			};
		},
		mounted() {
			this.options = [{
				value: '广东',
				label: '广东',
				children: [{
					value: '广州',
					label: '广州',
				}, {
					value: '深圳',
					label: '深圳',
				}, {
					value: '东莞',
					label: '东莞',
				}, {
					value: '湛江',
					label: '湛江',
				}, {
					value: '云浮',
					label: '云浮',
				}, {
					value: '其他',
					label: '其他',
				}]
			}, {
				value: '上海',
				label: '上海',
				children: [{
					value: '黄浦区',
					label: '黄浦区',
				}, {
					value: '卢湾区',
					label: '卢湾区',
				}, {
					value: '长宁区',
					label: '长宁区',
				}, {
					value: '其他',
					label: '其他',
				}]
			}, {
				value: '北京',
				label: '北京',
				children: [{
					value: '东城区',
					label: '东城区'
				}, {
					value: '西城区',
					label: '西城区'
				}, {
					value: '朝阳区',
					label: '朝阳区'
				}, {
					value: '其他',
					label: '其他'
				}]
			}]



		},
		methods: {

			handleAvatarSuccess: function(res, file) {
				if (res.code == 0) {
					//图片上传成功关闭上传框
					this.dialogVisible = false;
					//取出图片的url地址
					this.ruleForm.file = res.data;

					//文件上传成功后 ，获得图片的链接 还要发送异步请求修改数据库中的图片路径

					console.log("获得返回路径后执行的操作")
					this.updatePathByMemberId();
				}

			},
			beforeAvatarUpload: function(file) {
				//文件上传前对文件的大小和类型做检查
				const isJPGAndPNg = file.type.indexOf('image') >= 0 ? true : false;
				const isLt500K = file.size / 1024 <= 500;
				if (!isJPGAndPNg) {
					this.$message.error('只能上传jpg/png文件!');
				}
				if (!isLt500K) {
					this.$message.error('上传头像图片大小不能超过 500kb!');
				}
				return isJPGAndPNg && isLt500K;
			},

			//根据会员id查询会员的基本信息
			getMemberInfoById() {
				let _this = this;
				let url = "/api/mall/MemberServlet2?method=getMemberInfoById";

				this.$http.get(url, {
					params: {
						memberId: this.memberId,
					}
				}).then(function(response) {
					console.log("getMemberInfoById 返回的数据为:", response);
					if (response.data.code == 0) {
						//console.log("执行了返回结果")
						let userInfo = response.data.data;
						//console.log('userInfo',userInfo)
						for (let key in userInfo) {
							//console.log(key)
							_this.ruleForm[key] = userInfo[key];
						}
						//['广东', '湛江']
						_this.ruleForm.address = '广东 / 深圳'
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},

			//页面跳转事件
			changePage(path) {
				window.sessionStorage.setItem('activePath', '/' + path)
				if (path == "exit") {
					window.sessionStorage.removeItem("memberInfo")
					path = "MemberLogin"
					window.sessionStorage.setItem('activePath', '/' + path)
				}
				this.$router.push('/' + path);

			},

			//头像遮罩层点击事件
			//点击上传头像
			hover_click() {
				this.dialogVisible = true;
			},
			//关闭对话框
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						//关掉查询刷新一次
						//this.getaddressInfoById();
					})
					.catch(_ => {});
			},

			//修改个人信息
			EditInfo() {
				this.editFlag = true;
			},
			updatePathByMemberId() {
				let _this = this;
				let url = "/api/mall/MemberServlet2?method=updatePathByMemberId";
				_this.$http.get(url, {
					params: {
						memberId: _this.memberId,
						file: _this.ruleForm.file
					}
				}).then(function(response) {
					console.log("submitForm 服务端返回的数据为:", response);
					if (response.data.code == 0) {
						//图片上传成功提示
						_this.$notify({
							title: '提示',
							message: "图片上传信息成功",
							duration: 2000
						});

					} else {
						_this.$notify({
							title: '提示',
							message: response.data.msg,
							duration: 2000
						});
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})

			},

			//提交需要修改的数据
			submitForm(formName) {
				let _this = this;
				this.$refs[formName].validate((valid) => {
					console.log("点击了修改按钮")
					if (valid) {
						// alert('submit!');
						_this.editFlag = false;

						let url = "/api/mall/MemberServlet2?method=updateMemberInfoById";
						this.ruleForm.address = this.ruleForm.address.join('/')
						_this.$http.get(url, {
							params: this.ruleForm
						}).then(function(response) {
							console.log("submitForm 服务端返回的数据为:", response);
							if (response.data.code == 0) {
								let data = response.data.data;
								_this.$message.success("更新信息成功!");
							} else {
								_this.$message(response.data.msg)
							}
						}).catch(function(error) {
							console.log("服务端产生异常为:", error);
							_this.$notify({
								title: '提示',
								message: "系统错误:" + error,
								duration: 2000
							});

						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

			resetForm(formName) {
				console.log('点击了重置按钮')
				this.$refs[formName].resetFields();
				//获取原来的数据
				this.getMemberInfoById();


			},
			handleChange(value) {
				//籍贯信息改变触发的时间
				//this.ruleForm.address = this.ruleForm.address.join('/')
				console.log(value)
			},
			handleSizeChange: function() {
				alert("修改了每页显示的记录数");
			},
			initTableData: function() {
				let _this = this;
				let url = "/api/mall/AddressServlet2?method=queryById";

				this.$http.get(url, {
					params: {
						member_id: _this.memberId,
						currentPage: _this.currentPage
					}
				}).then(function(response) {
					console.log("服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;

						_this.pageInfo.pageSize = response.data.data.pageSize;

						_this.addressList = response.data.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			handleCurrentChange: function(curPage) {
				this.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			},
			AddressInfo: function() {
				this.addressDialogVisible = true;
				this.initTableData();
			},
			editData: function(scope) {
				this.upDialogVisible = true;
				this.upAddressList = scope.row;
				for (let attr in this.addressInfo) {
					this.addressInfo[attr] = scope.row[attr]
				}
			},
			setDefault: function(scope) {
				let This = this;
				let url = "/api/mall/AddressServlet2?method=updateById";
				this.$http.get(url, {
					params: {
						addressId: scope.row.address_id
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						This.initTableData();
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error)
				})
			},
			updateAddress: function() {
				let This = this;
				let url = "/api/mall/AddressServlet2?method=update";
				this.$http.get(url, {
					params: this.addressInfo
				}).then(function(response) {
					if (response.data.code == 0) {
						This.upDialogVisible = false;
						//把修改后的数据更新到表格中
						for (let attr in This.addressInfo) {
							This.upAddressList[attr] = This.addressInfo[attr]
						}
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error)
				})
			},
			deleteAddress: function(addressId) {
				let This = this;
				let url = "/api/mall/AddressServlet2?method=deleteById";
				this.$http.get(url, {
					params: {
						addressId: addressId
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						This.initTableData();
					}
				}).catch(function(error) {
					_this.$message(response.data.msg)
				})
			},
			delData: function(scope) {
				this.$confirm('是否删除该收货地址?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					this.deleteAddress(scope.row.address_id);
				}).catch((e) => {
					console.log(e)
					this.$message.info('已取消删除')
				})
			},
			OrderInfo: function() {
				this.orderDialogVisible = true;
				let _this = this;
				let url = "/api/mall/OrderServlet2?method=query";
				console.log("OrderInfo", this.memberId);
				this.$http.get(url, {
					params: {
						member_id: _this.memberId,
						currentPage: _this.currentPage
					}
				}).then(function(response) {
					console.log("服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;

						_this.pageInfo.pageSize = response.data.data.pageSize;

						_this.orderList = response.data.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				})
			},
			orderDetails: function(order_code) {
				let _this = this;
				let url = "/api/mall/OrderDetailsServlet2?method=queryDetailsByOrderId";

				this.$http.get(url, {
					params: {
						order_code: order_code,
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						_this.orderDetailsList = response.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
				this.orderDetailsDialogVisible = true;
			},
			MoneyInfo: function() {
				this.upMoneyDialogVisible = true;
			},
			updateMoney: function() {
				let This = this;
				let url = "/api/mall/MemberServlet2?method=updateMoneyById";
				this.$http.get(url, {
					params: {
						memberId: This.memberId,
						money: This.money
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						This.upMoneyDialogVisible = false;
						This.money = "";
						This.getMemberInfoById();
					}
				}).catch(function(error) {
					This.$message(response.data.msg)
				})
			},
			addAddress: function() {
				this.addDialogVisible = true;
			},
			AddAddress: function() {
				let This = this;
				let url = "/api/mall/AddressServlet2?method=insertAddress";
				this.$http.get(url, {
					params: {
						address_id: This.addAddressInfo.address_id,
						name: This.addAddressInfo.name,
						tel: This.addAddressInfo.tel,
						address: This.addAddressInfo.address,
						member_id: This.memberId,
					}
				}).then(function(response) {
					if (response.data.code == 0) {
						This.addDialogVisible = false;
						This.initTableData(); //重新查数据库
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error)
				})
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	#PerCenter {
		position: absolute;
		display: flex;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* background-color: #FF0000; */
		background-image: url(../assets/img/2.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.el-header {
		background-color: #cccccc;
		color: #333;
		text-align: center;
		height: 5%;
		line-height: 25px;
	}

	.el-main {
		background-color: rgba(255, 255, 255, 0.5);
		color: #000000;
		text-align: center;
		height: 100%;
		width: 100%;
	}

	.el-container {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.el-header>ul {
		position: absolute;
		right: 5px;
	}

	.el-header>ul>li {
		float: left;
		list-style: none;
		margin: 5px;
		user-select: none;
	}

	.el-header>ul>li:not(:first-child):hover {
		color: red;
		text-decoration: underline;
	}

	.el-avatar {
		position: absolute;
		left: -30px;
		top: 2px;
		width: 33px;
		height: 30px;
		color: #42B983;
		/* border: 1px solid #0000FF; */
	}

	.el-avatar--icon {
		font-size: 35px;
	}

	.el-main>div {
		/* display: flex; */
		width: 60%;
		height: 110%;
		min-width: 800px;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, .6);
	}

	.el-main>div>div:nth-child(1) {
		display: block;
		position: relative;
		width: 150px;
		height: 150px;
		margin: 0 auto;
		border: 1px solid #FF0000;
		border-radius: 50%;
		background-color: #ffff00;
	}

	.el-main>div>div:nth-child(1)>img {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.el-main>div>div:nth-child(1)>div {
		display: none;
		position: absolute;
		width: 149px;
		height: 149px;
		left: 0px;
		top: 0px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .5);
	}

	.el-main>div>div:nth-child(1)>div>img {
		position: relative;
		width: 50%;
		height: 50%;
		left: 25%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
	}

	.el-main>div>div:nth-child(1):hover #active_hover {
		display: block;
	}

	.el-main>div>div:nth-child(2) {
		width: 100%;
		height: 100%;
		/* border: 2px solid #0000FF; */
	}

	.baseInfo>div:nth-child(1) {
		height: 35px;
		border-bottom: 2px solid #bababa;
	}

	.baseInfo>div:nth-child(2) {
		text-align: left;
		padding: 10px 300px;

	}

	.baseInfo>div:nth-child(2)>ul {
		/* background-color: #0000FF; */
	}

	.baseInfo>div:nth-child(2)>ul>li {
		text-align: left;
		line-height: 50px;
		list-style: none;
	}

	.edit {
		/* position: absolute; */
		width: 50px;
		height: 20px;
		/* margin: 0px 120px; */

		font-size: 20px;
	}
  .redact{
    width: 50px;
    height: 20px;
    /* margin: 0px 120px; */
    margin-left: -30px;
    font-size: 20px;
  }

	.address {
		/* position: absolute; */
		margin-left: 35px;
		width: 85px;
		height: 20px;
		/* margin: 0px 120px; */
		font-size: 20px;
	}

	.order {
		/* position: absolute; */
		margin-left: 35px;
		width: 85px;
		height: 20px;
		/* margin: 0px 120px; */
		font-size: 20px;
	}

	.money {
		/* position: absolute; */
		margin-left: 35px;
		width: 85px;
		height: 20px;
		/* margin: 0px 120px; */
		font-size: 20px;
	}

	demo-ruleForm {
		text-align: left;
	}

	.el-form-item {
		margin: 15px 5px;
	}

	.last_footer {
		padding-left: 50px;
	}

	ul>li {
		font-size: 20px;
		padding: 10px;
		margin-left: 100px;
	}
</style>
